<template>
  <el-row align="middle" class="align-items">
    <el-col :span="12">
      <div  class="mediatitle">
        关联商品
        <span v-if="goodsDataList.length > 0">({{goodsDataList.length}})</span>
      </div>
    </el-col>
    <el-col :span="12">
      <div align="right">
        <span v-if="dataInfo.corpid == currentCorpid">
          <span v-if="isedit">
            <el-button type="primary" size="mini" @click="handleAddMediaGoods">
              <el-icon>
                <plus />
              </el-icon>
              添加商品
            </el-button>
          </span>
        </span>

      </div>
    </el-col>
  </el-row>
  <el-table :data="goodsDataList" v-loading="isloading" border style="width: 100%">
        <el-table-column label="编号" prop="goodsno" :width="60" />
        <el-table-column label="商品图片" :width="80" align="center">
          <template #default="{row}">
            <el-image
                    :preview-src-list="imgSrcList"
                    :src="row.imgurl_150"
                    :initial-index="initialIndex(row.imgurl_720)"
            />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="goods_name" :width="200" show-overflow-tooltip/>
        <el-table-column label="商品ID" prop="goods_id" :width="100" />
        <el-table-column label="实际价格" :width="100">
          <template #default="{row}">
            ¥ {{row.goods_price}}
          </template>
        </el-table-column>
        <el-table-column label="市场价格" :width="100">
          <template #default="{row}">
            ¥ {{row.market_price}}
          </template>
        </el-table-column>
        <el-table-column label="供货商" prop="supplier" :width="120"/>
        <el-table-column label="货品号" prop="goods_sn" :width="120" />
        <el-table-column label="是否售罄" :width="80">
          <template #default="{row}">
            <span style="color: #67C23A" v-if="row.stockcount > 0">未售罄</span>
            <span style="color: #F56C6C" v-else>已售罄</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" :width="80">
          <template #default="{row}">
            <span v-if="row.state == 1" style="color: #67C23A">上线</span>
            <span v-else style="color: #F56C6C">下线</span>
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort" :width="60" align="center">
          <template #default="{row}">
            <span v-if="currentCorpid == dataInfo.corpid && isedit">
              <media-goods-resort
                      :row="row"
                      :up-disabled="row.topno > 1"
                      :down-disabled="row.topno > 1"
                      :mediaid="dataInfo.mediaid"
                      @reloadGoodsList="init"
              />
            </span>
            <span v-else>
              <media-goods-resort
                :row="row"
                :up-disabled="true"
                :down-disabled="true"
                :mediaid="dataInfo.mediaid"
              />
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" :width="220">
          <template #default="{row}">
            <span v-if="currentCorpid == dataInfo.corpid && isedit">
              <media-goods-to-top
                :row="row"
                :mediaid="dataInfo.mediaid"
                :top-disabled="false"
                :cancel-top-disabled="row.topno == 1"
                @reloadGoodsList="init"
              />
              <el-button type="text" size="small" style="color: red" @click="handleDeleteRelGoods(row)">删除</el-button>
              <popup-goods
                      :row="row"
                      :mediaid="dataInfo.mediaid"
                      :disabled="false"
              />
              <br/>
              <sold-out
                      :row="row"
                      :disabled="row.stockcount == 0"
                      :mediaid="dataInfo.mediaid"
                      :cancel-disabled="row.stockcount > 0"
                      @reloadGoodsList="init"
              />
            </span>
            <span v-else>
              <media-goods-to-top
                :row="row"
                :mediaid="dataInfo.mediaid"
                :top-disabled="true"
                :cancel-top-disabled="true"
              />
              <el-button type="text" size="small" :disabled="true">删除</el-button>
              <popup-goods
                :row="row"
                :mediaid="dataInfo.mediaid"
                :disabled="true"
              />
              <br/>
              <sold-out
                      :row="row"
                      :mediaid="dataInfo.mediaid"
                      @reloadGoodsList="init"
              />
            </span>
          </template>
        </el-table-column>
      </el-table>
  <el-row>
    <el-col :span="24">
      <media-rel-goods
          ref="mediaRelGoodsRef"
          :rel-goods-visible="relGoodsVisible"
          @cancelRelGoodsDialog="cancelRelGoodsDialog"
          @reloadData="reloadData"
      />
    </el-col>
  </el-row>
</template>

<script>
  import {ref, computed, reactive, nextTick, provide} from 'vue'
  import {Plus} from "@element-plus/icons"
  import {getGoodsBatchInfo} from "@/api/media/goods";
  import {getMediaRelGoods, deleteMediaRelGoods, getSeriesRelGoods, deleteSeriesRelGoods} from "@/api/goods/relgoods";
  import MediaRelGoods from "../MediaRelGoods/index";
  import {ElMessageBox, ElMessage} from 'element-plus'
  import MediaGoodsResort from "@/components/Common/MediaGoodsResort";
  import MediaGoodsToTop from "@/components/Common/MediaGoodsToTop";
  import PopupGoods from "@/components/Common/Message/PopupGoods"
  import SoldOut from "@/components/Common/MediaGoods/SoldOut"

  export default {
    name: "MediaGoods",
    props: {
      dataInfo: {
        type: Object,
        required: true
      },
      relType: {
        type: String,
        default: 'media'
      },
      currentCorpid: {
        type: Number,
        required: true
      },
      isedit: {
        type: Boolean,
        default: false
      }
    },
    components: { Plus, MediaRelGoods, MediaGoodsResort, MediaGoodsToTop, PopupGoods, SoldOut },
    setup(props) {
      const goods_id = ref([])
      const goodsDataList = ref([])
      const isloading = ref(false)
      const imgSrcList = ref([])
      const relGoodsFormData = reactive({
        mediaid: undefined,
        seriesid: undefined,
        datas: []
      })
      const relGoodsVisible = ref(false)
      const mediaRelGoodsRef = ref(null)
      const goodsIds = ref([])
      provide('goodsIds', goods_id)
      provide('relGoodsFormData', relGoodsFormData)

      const initialIndex = computed(() => {
        return (src) => {
          return imgSrcList.value.findIndex(d => d === src)
        }
      })

      // 获取商品详情
      const getGoodsDataList = () => {
        isloading.value = true
        if (goods_id.value.length > 0) {
          getGoodsBatchInfo({goods_id: goods_id.value.join(',')}).then(response => {
            isloading.value = false
            if (response.errcode == 0) {
              goodsIds.value.forEach(goods => {
                response.data.forEach(row => {
                  if (goods.goodsid == row.goods_id) {
                    Object.assign(goods, row)
                  }
                })
              })
              goodsDataList.value = goodsIds.value
            }
            imgSrcList.value = []
            goodsDataList.value.forEach(r => {
              imgSrcList.value.push(r.imgurl_720)
            })
          })
        } else {
          goodsDataList.value = []
          isloading.value = false
        }
      }
      const handleAddMediaGoods = () => {
        if (props.relType == 'media') {
          relGoodsFormData.seriesid = undefined
          relGoodsFormData.mediaid = props.dataInfo.mediaid
          relGoodsFormData.datas = []
        } else {
          relGoodsFormData.seriesid = props.dataInfo.seriesid
          relGoodsFormData.mediaid = undefined
          relGoodsFormData.datas = []
        }
        relGoodsVisible.value = true
        nextTick(() => {
          mediaRelGoodsRef.value.init()
        })
      }

      // 获取媒资关联的商品
      const getMediaRelGoodsList = () => {
        goods_id.value = []
        goodsIds.value = []
        if (props.dataInfo.mediaid) {
          getMediaRelGoods({mediaid: props.dataInfo.mediaid}).then(response => {
            if (response.errcode == 0) {
              goodsIds.value = response.data
              response.data.forEach(goods => {
                goods_id.value.push(goods.goodsid)
              })
              getGoodsDataList()
            }
          })
        }
      }
      // 获取子集关联的商品
      const getSeriesRelGoodsList = () => {
        goods_id.value = []
        goodsIds.value = []
        getSeriesRelGoods({seriesid: props.dataInfo.seriesid}).then(response => {
          if (response.errcode == 0) {
            goodsIds.value = response.data
            response.data.forEach(goods => {
              goods_id.value.push(goods.goodsid)
            })
            getGoodsDataList()
          }
        })
      }
      const cancelRelGoodsDialog = () => {
        relGoodsVisible.value = false
      }
      const handleDeleteRelGoods = (row) => {
        ElMessageBox.confirm('确定要删除商品 ' + row.goods_name + ' 吗？', '删除商品', {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          if (props.relType == 'media') {
            deleteMediaRelGoods({mediaid: props.dataInfo.mediaid, datas: [row.goods_id]}).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                getMediaRelGoodsList()
              }
            })
          } else if (props.relType == 'series') {
            deleteSeriesRelGoods({seriesid: props.dataInfo.seriesid, datas: [row.goods_id]}).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                getSeriesRelGoodsList()
              }
            })
          }
        }).catch(() => {})
      }
      const reloadData = () => {
        init()
      }

      const init = () => {
        if (props.relType == 'media') {
          getMediaRelGoodsList()
        } else if (props.relType == 'series') {
          getSeriesRelGoodsList()
        }
      }

      return {
        goodsDataList,
        isloading,
        init,
        imgSrcList,
        initialIndex,
        handleAddMediaGoods,
        relGoodsFormData,
        relGoodsVisible,
        cancelRelGoodsDialog,
        reloadData,
        mediaRelGoodsRef,
        goods_id,
        handleDeleteRelGoods,
      }
    }
  }
</script>

<style lang="scss">
  // .mediatitle{
  //   margin-top: 20px;
  //   &:first{
  //     margin-top: 0;
  //   }
  //   display:inline-block;
  //   margin-right: 10px;
  //   margin-bottom: 16px;
  //   font-weight: bold;
  //   font-size: 18px;
  // }

</style>
